.studio-layout {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .main-header {
    height: 48px;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: var(--main-color);

    .main-menu {
      .el-dropdown {
        margin-top: 7px;

        .el-icon {
          color: #fff;
          font-size: 28px;
        }
      }

      .el-avatar {
        margin: 8px 8px 0 8px
      }
    }
  }

  .main-sub-toolbar {
    height: 38px;
    display: flex;
    flex-direction: row;
    background: var(--sub-header-color);

    .el-menu {
      background: var(--sub-header-color);

      &.el-menu--horizontal > li.el-menu-item {
        padding: 0 10px;
        border-bottom: 4px solid rgba(0, 0, 0, 0);
      }

      &.el-menu--horizontal > li.el-menu-item.is-active {
        color: #000 !important;
        border-bottom: 4px solid var(--main-color);
        font-size: 14px;
        font-weight: 600;
      }
    }

    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
      background: var(--sub-header-color);
      color: var(--main-color);
    }

    .sub-menu {
      flex-grow: 0;
      align-items: center;
      line-height: 38px;

      span {
        font-size: 14px;
        display: block;
        padding: 0px 10px;
        margin-right: 8px;
        cursor: pointer;

        &:hover {
          color: var(--main-color);
          font-weight: 500;
        }
      }
    }
  }

  .main-content {
    flex: 1;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}